<template>
  <div>
    <el-form
      :model="loginForm"
      :rules="loginRules"
      ref="loginForm"
      class="login-form"
      autocomplete="on"
      label-position="left"
    >
      <el-form-item prop="email">
        <el-input v-model="loginForm.email" auto-complete="off" placeholder="Email地址" ref="email">
           <i slot="prefix" class="el-input__icon iconfont sigin-iconfont">&#xe611;</i>    
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="密码" ref="password">
           <i slot="prefix" class="el-input__icon iconfont sigin-iconfont">&#xe734;</i>    
        </el-input>
      </el-form-item>
      <el-form-item class="login-button">
         <el-button @click="submitForm" type="danger">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate"
import axios from 'axios'

export default {
  name: 'UserLogin',
  props:{
      initFormData:Object
  },
  data () {  
    const validatePassword = (rule, value, callback) => {
      if(value.trim && value.length >= 6){
        callback()
      }else{
        callback(new Error("The password can not be less than 6 digits"))
      }
    }
    const validateEmail =(rule, value, callback) =>{
      const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      var valid =reg.test(value)
      if(!valid){
        callback(new Error("Please enter the correct email"))
      }else{
        callback()
      }
    }
    return {
      loginForm: {
        password: this.initFormData.password,
        email:this.initFormData.email
      },
      loginRules: {
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ],
        email: [
          {required:true,trigger:"blur", validator:validateEmail}
        ]
      },
      passwordType: "password",
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {}
    }
  },
  mounted (){
    if (this.loginForm.email === ''){
      this.$refs.email.focus()
    }else if (this.loginForm.password === ''){
      this.$refs.password.focus()
    }
  },
    methods :{
      submitForm (){
         this.$refs.loginForm.validate(valid =>{
           if(valid){
             if(this.loginForm.email && this.loginForm.email === '111@qq.com'
                && this.loginForm.password && this.loginForm.password === '111111'){
                   this.$router.push('/gallery')
                }else{
                  this.loginMessage()
                  return false
                }
            //   axios.get(this.loginForm.email,this.loginForm.password).then(data =>{
            //   if(data){
            //     this.$router.push('/gallery')
            //   }else{
            //       console.log('error submit!!')
            //       return false
            //   }
            //  })  
           }
         }) 
      },
      loginMessage () {
        this.$alert('the email or password is error', {
          confirmButtonText: '确定',
          callback: action => {
            this.loginForm.email =''
            this.loginForm.password =''
            this.$refs.email.focus()
            return false
          }
        })
      }
    }
  }

</script>

<style lang="scss" scoped>

</style>
